<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.js"></script>
</head>
<style>
    .success {
        color: springgreen;
    }

    .err {
        color: red;
    }
</style>

<body>
    <div id="app">
        <p>用户名：
            <input type="text" v-model="user"><span :class="userclass">{{usertips}}</span>
        </p>
        <p>密&emsp;码：
            <input type="text" v-model="pwd"><span :class="pwdclass">{{pwdtips}}</span>
        </p>
        <p>
            <label><input type="checkbox" v-model="checked">是否记住用户名和密码？</label>
        </p>
        <p>
            <button @click="login">登录</button>
        </p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: "",
            userclass: "",
            usertips: "",

            pwd: "",
            pwdclass: "",
            pwdtips: "",

            checked: false,

        },
        computed: {

        },
        created() {
            this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
            console.log(this.userinfo);
            if (this.userinfo) {
                this.user = this.userinfo.username;
                this.pwd = this.userinfo.userpwd;
            }
        },
        methods: {
            async login() {
                // console.log(this.pwd);
                // console.log(this.user.length);
                // console.log(this.pwd.length);
                if (this.user && this.pwd) { //有内容再判断

                    this.usertips = "";

                    let {data: list} = await axios({
                        method: "get",
                        url: "http://localhost:2345/usernameinfos",
                        params: {
                            username: this.user,
                            // userphone: this.user,
                            userpwd: this.pwd,
                        }
                    });

                    console.log(list);
                    // console.log(list[0].userpwd);
                    // console.log(list[0].userphone);

                    if (list.length) {

                        this.pwdtips = "";
                        alert("登录成功");
                        // console.log(list[0].username);

                        if (this.checked) { //如果勾选了记住用户名密码
                            let info = list[0];//取出登录的用户信息
                            window.localStorage.setItem("userinfo", JSON.stringify(info));//将对象转成 字符串存储
                        } else {//如果没有勾选了记住用户名密码
                            window.localStorage.removeItem("userinfo");
                        }

                        location.href = "05 用户管理列表.html";

                    } else {
                        // this.usertips = "该用户名不存在";
                        // this.userclass = "err";
                        this.pwdtips = "密码或用户名有误";
                        this.pwdclass = "err";
                    }
                }
            }
        },
        watch: {
            // checked(newchecked) {
            //     console.log(newchecked);
            //     this.checked = newchecked;
            // }
        }

    })
</script>

</html>